<template>
    <div>
        <div class="container">
            <div class="handle-box">
                <el-input v-model="query.value" placeholder="内容" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>

                <el-button type="primary" icon="el-icon-circle-plus-outline" class="handle-del floatr" @click="addSysRole">新增</el-button>
            </div>
            <el-table
                    :data="tableData"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column type="index" label="ID" width="55" align="center" ></el-table-column>
                <el-table-column prop="value" label="内容"></el-table-column>
                <el-table-column prop="groupCode" label="所属群组"></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                icon="el-icon-edit"
                                @click="handleEdit(scope.$index, scope.row)"
                        >编辑</el-button>
                        <el-button
                                type="text"
                                icon="el-icon-delete"
                                class="red"
                                @click="handleDelete(scope.$index, scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="query.pageIndex"
                        :page-size="query.pageSize"
                        :total="pageTotal"
                        @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog title="编辑" :visible.sync="editVisible" width="30%" :close-on-click-modal="false">
            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                <el-form-item label="所属群组" prop="groupName" >
                    <el-select v-model="form.groupName" placeholder="请选择" filterable  style="width: 100%;">
                        <el-option v-for="item in groupList" :key="item.name" :label="item.value" :value="item.name" />
                    </el-select>
                </el-form-item>
                <el-form-item label="编号" prop="code" >
                    <el-input maxlength="20" v-model="form.code" ></el-input>
                </el-form-item>
                <el-form-item label="内容" prop="value" >
                    <el-input maxlength="20" v-model="form.value" ></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="butCancel">取 消</el-button>
                <el-button type="primary" @click="saveEdit('form')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import { selectPage,delDictionary,addDictionary,updateDictionary,selectDicGroup,getDictionaryByID} from '../../api/dictionary';
    import { _dateFormat} from '../../utils/tool';
    export default {
        name: 'basetable',
        data() {
            return {
                query: {
                    status:'',
                    id:'',
                    version:'',
                    pageIndex: 1,
                    pageSize: 10
                },
                tableData: [],
                multipleSelection: [],
                groupList:[],
                delList: [],
                editVisible: false,
                pageTotal: 0,
                form: {
                    code:"",
                    value:"",
                    groupName:""
                },
                rules:{
                    code :[{required: true, message: '编号不能为空', trigger: 'blur'}],
                    value :[{required: true, message: '内容不能为空', trigger: 'blur'}],
                    groupName :[{required: true, message: '请选择所属群组', trigger: 'blur'}],
                },
                idx: -1,
                id: -1,
            };
        },
        created() {
            this.getData();
        },
        filters:{
            //格式化后台传过来的时间戳
            dateFormat(time) {
                let date = new Date(time);
                return _dateFormat(date,'yyyy-MM-dd hh:mm')
            }
        },
        methods: {
            // 获取list
            getData() {
                selectPage(this.query).then(res => {
                    this.tableData = res.items;
                    this.pageTotal = res.total;
                });
            },
            // 查询分组
            getDicGroup(id){
                var _that =this;
                selectDicGroup({}).then(res => {
                    _that.groupList = res.items;
                    if(id != "" && id != null){
                        getDictionaryByID(id).then(res => {
                            _that.form = res;
                        });
                    }
                });
            },
            // 触发搜索按钮
            handleSearch() {
                this.$set(this.query, 'pageIndex', 1);
                this.getData();
            },
            // 删除操作
            handleDelete(index, row) {
                // 二次确认删除
                this.$confirm('确定要删除吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.query.status = 1 ;
                    this.query.id = row.id ;
                    this.query.version = row.version ;
                    delDictionary(this.query).then(res => {
                        this.$message.success('删除成功');
                        this.getData();
                    });
                })
                .catch(() => {});
            },
            // 多选操作
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            // 编辑操作
            handleEdit(index, row) {
                this.idx = index;
                this.editVisible = true;
                this.getDicGroup(row.id);
            },
            //新增操作
            addSysRole() {
                Object.keys(this.form).forEach(key => (this.form[key] = ''));
                this.editVisible = true;
                this.getDicGroup();
            },
            // 保存编辑
            saveEdit(formData) {
                this.$refs[formData].validate((valid) => {
                    if (valid) {
                        if(this.form.id != null && this.form.id != undefined){
                            // 编辑
                            updateDictionary(this.form).then(res => {
                                this.$message.success("保存成功");
                                this.getData();
                            });
                        }else{
                            // 新增
                            addDictionary(this.form).then(res => {
                                this.$message.success("保存成功");
                                this.getData();
                            });
                        }
                        this.butCancel();
                    }
                })
            },
            butCancel(){
                this.editVisible = false;
                this.form = {
                    code:"",
                    value:"",
                    groupName:""
                }
            },
            // 分页导航
            handlePageChange(val) {
                this.$set(this.query, 'pageIndex', val);
                this.getData();
            }
        }
    };
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
    .red {
        color: #ff0000;
    }
    .mr10 {
        margin-right: 10px;
    }
    .floatr {
        float: right;
    }
</style>